<template>
	<view>
		<u-navbar :is-back="false" height="60">
			<view>
				<image style="width: 382rpx; height: 60rpx;" src="../static/logo.png" mode=""></image>
			</view>
			<view slot="right" @click="openMenu">
				<image style="width: 52rpx; height: 52rpx; margin-right: 20rpx;" src="../static/menu.png" mode="">
				</image>
			</view>
		</u-navbar>
		<u-popup v-model="menuShow" mode="top">
			<view style="height: 90vh;">
				<view class="title-box">
					<view>
						<image style="width: 382rpx; height: 60rpx;" src="../static/logo.png" mode=""></image>
					</view>
					<view @click="openMenu">
						<image style="width: 38rpx; height: 38rpx; margin-right: 20rpx;" src="../static/exit (1).png"
							mode="">
						</image>
					</view>
				</view>
				<view class="menu-box">
					<view class="menu-item" v-for="(menuItem,menuIndex) in menuList" :key="menuIndex"
						@click="clickMenu(menuItem)">
						<view style="display: flex;justify-content: space-between;padding:20rpx;">
							<view class="menu-text">{{menuItem.title}}</view>
							<view v-if="menuItem.children">
								<u-icon name="arrow-down" color="#B6B6B6" v-if="!menuItem.checked"></u-icon>
								<u-icon name="arrow-up" color="#B6B6B6" v-else></u-icon>
							</view>
						</view>

						<view class="submenu-box" v-if="menuItem.children && menuItem.checked">
							<view class="submenu-item" v-for="(subItem,subIndex) in menuItem.children"
								@click.stop="clickSubMenu(subItem)">{{subItem.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuShow: false,
				menuList: [{
						title: '网站首页',
						url: '/pages/index/index'
					},
					{
						title: '关于协会',
						url: '',
						checked: false,
						children: [{
								title: '协会简介',
								url: '/pages/companyDetail/index',
							},
							{
								title: '协会章程',
								url: '/pages/companyRule/index',
							}
						]
					},
					{
						title: '资讯中心',
						url: '',
						checked: false,
						children: [{
								title: '行业动态',
								url: '/pages/newsTrends/index',
							},
							{
								title: '协会动态',
								url: '',
							},
							{
								title: '会员动态',
								url: '',
							},
							{
								title: '政策法规',
								url: '',
							}
						]
					},
					{
						title: '会员名录',
						url: '/pages/member/index',
					},
					{
						title: '会员服务',
						url: '',
						checked: false,
						children: [{
								title: '会员申请',
								url: '/pages/memberApply/index',
							},
							{
								title: '资料下载',
								url: '/pages/dataDownload/index',
							},
							{
								title: '培训服务',
								url: '',
							}
						]
					},
					{
						title: '协会公告',
						url: '',
					},
					{
						title: '党建园地',
						url: '/pages/parkingGarden/index',
					},
				]
			}
		},
		methods: {
			openMenu() {
				this.menuShow = !this.menuShow
			},
			clickMenu(item) {
				if (item.children) {
					item.checked = !item.checked
					return
				}
				console.log('跳转到菜单页');
				uni.navigateTo({
					url:item.url
				})
			},
			clickSubMenu(item) {
				console.log('跳转到子菜单页');
				uni.navigateTo({
					url:item.url
				})
			}
		}
	}
</script>

<style lang="scss">
	.title-box {
		display: flex;
		justify-content: space-between;
		padding: 25rpx 16rpx;
		border-bottom: 1rpx solid #e4e7ed;
		align-items: center;
		position: fixed;
		top: 0%;
		width: 100%;
		background-color: #fff;
	}

	.menu-box {
		font-size: 32rpx;
		margin-top: 120rpx;

		.menu-item {
			border-bottom: 1rpx solid #e4e7ed;
			padding: 10rpx 0;

			.submenu-box {
				color: #666666;
				background-color: #F9F9F9;

				.submenu-item {
					padding: 30rpx;
				}
			}
		}

	}
</style>